<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/zepto_1.1.3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js"></script>
	</head>

	<body>
		<!-- 侧滑导航根容器 -->
		<div class="mui-off-canvas-wrap mui-draggable">
			<!-- 菜单容器 -->
			<aside class="mui-off-canvas-left">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜单具体展示内容 -->
						<div class="mui-row">
							<div class="mui-col-xs-12">
								<a class="head-img mui-pull-left">
									<img src="img/head-img.jpg" alt="" />
								</a>
								<h5>程景</h5>
								<p>头像是本人，爱信不信。</p>
							</div>
							<div class="mui-col-xs-12 edit">
								<p class="mui-pull-left">菜单模式</p>
								<div id="pattern-switch" class="mui-switch mui-pull-right">
									<div class="mui-switch-handle"></div>
								</div> 
							</div>
							<div class="mui-col-xs-12 about">
									<p class="mui-navigate-right">关于开发者</p>
								</div>
							</div>
						</div>
					</div>
			</aside>
			<!-- 主页面容器 -->
			<div class="mui-inner-wrap">
				<!-- 主页面标题 -->
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-menu mui-pull-left">
						<img src="img/logo.png" alt="" />
					</a>
					<h1 class="mui-title">中午吃什么</h1>
				</header>
				<div class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 主界面具体展示内容 -->
						<div class="main">
							<p>你是否因</p>
							<p>中午吃什么</p>
							<p>烦恼</p>
							<p>浮躁</p>
							<p>内分泌失调</p>
							<p>没关系！！！</p>
							<p>程哥拯救你！</p>
						</div>
						<button data-loading-text="别急，让我想想" class="mui-btn mui-btn-success eatwhat">我要吃</button>
					</div>
				</div>
			</div>
			</div>
	</body>

</html>